import { defineStore } from 'pinia';
import { markRaw } from 'vue';

// 引入设计数据
import { useDesignerStore } from './designer';

// 引入拖拽数据
import { loadComponent, components, loadComponentConfig } from '@/elements/index';

// 引入工具函数
import { deepCopy, deepMerge, uuid } from '@/utils/index';

// 首先定义类型接口（建议放在文件顶部或单独的类型文件中）
interface DragItem {
  level?: number[];
  list?: DragItem[];
  [key: string]: any; // 其他可能的属性
}

export const useDragStore = defineStore('dragStore', {
  state: () => ({
    data: {
      // 表单项大纲结构
      outline: [
        {
          label: 'Level one 1',
          isLeaf: true,
          children: [
            {
              label: 'Level two 1-1',
              children: [
                {
                  label: 'Level three 1-1-1',
                },
              ],
            },
          ],
        },
        {
          label: 'Level one 2',
          children: [
            {
              label: 'Level two 2-1',
              children: [
                {
                  label: 'Level three 2-1-1',
                },
              ],
            },
            {
              label: 'Level two 2-2',
              children: [
                {
                  label: 'Level three 2-2-1',
                },
              ],
            },
          ],
        },
      ],
      list: [], // 表单项
      select: {}, // 表单项
      selectRef: null, // 选择的表单编号
      // 表单配置信息
      form: {
        name: '', // 表单名称
        ref: '', // 编号
        rules: '', // 验证规则名称：
        size: 'default', // 表单尺寸：
        hideRequiredAsterisk: false, // 是否隐藏必填字段标签旁边的红色星号
        showMessage: true, // 显示校验错误信息
        inlineMessage: true, // 显示校验错误信息
        showSubmitButton: true, // 是否显示提交按钮
        showResetButton: true, // 是否显示重置按钮
        labelSuffix: '', // 标签后缀
        labelPosition: 'right', // 标签对齐方式
        disabled: false, // 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性
        labelWidth: {
          // 标签宽度
          value: '125', // 值
          unit: 'px', // 单位
        },
        event: {
          // 事件
          // 表单提交时触发
          onSubmit: `function onSubmit(formData, api) { 
}`,
          // 表单重置后触发
          onReset: `function onReset(api) { 
}`,
          // 表单组件初始化完毕后触发
          onCreated: `function onCreated(api) { 
}`,
          // 表单组件渲染完毕后触发
          onMounted: `function onMounted(api) { 
}`,
          // 表单渲染规则重载后触发
          onReload: `function onReload(api) { 
}`,
          // 表单组件的值发生变化时触发
          onChange: `function onChange(field, value, options) { 
}`,
          // 远程数据请求发送前触发
          beforeFetch: `function beforeFetch(config, data) { 
}`,
        },
      },
    },
  }),
  actions: {
    /**
     * 组件列表新增
     * @param componentObj 组件信息
     * @param isAdd 是否新增到列表中
     * @returns
     */
    listPust(componentObj: any, isAdd: boolean) {
      // 设计数据
      const designerStore = useDesignerStore();

      // 对象深拷贝
      let newEl = deepCopy(componentObj);

      let key = uuid();

      //对象深拷贝
      let componentInfo = deepMerge({}, newEl, { key, options: { id: 'id_' + key, ref: 'ref_' + key } });

      // 设置组件地址
      componentInfo.component.component = markRaw(loadComponent(componentInfo.type));

      // 设置配置组件地址
      componentInfo.component.config = markRaw(loadComponentConfig(componentInfo.type));

      // 设置已选择的组件
      designerStore.data.findSelect.component = markRaw(loadComponent(componentInfo.type));

      // 设置选择的编号
      designerStore.data.findSelect.key = key;

      // 设置表单配置显示为组件设置
      designerStore.data.configForm.activeTab = 'component';

      if (isAdd) {
        this.data.list.push(componentInfo);
        this.resetOutlineLevels();
      }

      // 添加操作记录
      designerStore.addOperation();

      return componentInfo;
    },
    /**
     * 刷新每个拖拽组件等级
     * @param {*} list
     * @param {*} parentLevels
     */
    resetOutlineLevels(this: any, list = this.data.list, parentLevels = []) {
      list.forEach((item: DragItem, index: number) => {
        // 创建当前层级的完整路径
        item.level = [...parentLevels, index];
        // 如果有子节点，递归处理并传递当前路径
        if (item.list && list.length) {
          this.resetOutlineLevels(item.list, item.level);
        }
      });
    },
  },
});
